<template>
	<view>
		<view class="title">
			经销商
		</view>
		<view class="list">
			<view class="li"  @click="tiao_detail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="li_1">
					<view class="li_1_1">
						{{item.stores}}
					</view>
					<view class="li_1_2">
						<view class="li_1_2_1">
							姓名 :
						</view>
						<view class="">
							{{item.name}}
						</view>
					</view>
					<view class="li_1_3">
						<view class="li_1_2_1">
						联系方式 :
						</view>
						<view class="">
							{{item.mobile}}
						</view>
					</view>
				</view>
				<view class="li_2">
					<image src="../../../static/pages/index/icon_location@2x.png" mode=""></image>
					<view class="dizhi">
						{{item.store_address}}
					</view>
				</view>
			</view>
		
		
		</view>
		<view class="add" @click="jiashang">
			+ 添加经销商
		</view>

		<dibudao indexs="1"></dibudao>
	</view>
</template>

<script>
	import {regionList} from '@/request/api.js';
	export default {
		
		data() {
			return {
				page:1,
				list:[],
				pageShow:false
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.page=1;
			this.pageShow=false;
			this.list=[]
			this.init()
		},
		onReachBottom() {
			if(this.pageShow){
				this.init()
			}
		},
		methods:{
			//数据初始化
			init(){
				let _this = this
				let data = {
					id:uni.getStorageSync('regionMessage').id,
					page:_this.page
				}
				regionList(data).then(res=>{
					if(res.code==1){
						if(res.data.data.length>0){
							_this.list = _this.list.concat(res.data.data);
							_this.page++;
							_this.pageShow = true
						}else{
							_this.pageShow = false
						}
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			
			tiao_detail:function(id){
				
				uni.navigateTo({
					url:`jingxiao_detail?id=${id}`
				})
			},
			
			jiashang:function(){
				uni.navigateTo({
					url:'add_jingxiao'
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.add{
		width: 100%;
		height: 100rpx;
		text-align: center;
		position: fixed;
		bottom: 120rpx;
		font-size: 36rpx;
		color: #fff;
		background: #1855F6;
		z-index: 99;
		line-height: 100rpx;
	}
	view{
		box-sizing: border-box;
	}
	.list{
		padding:108rpx 40rpx 220rpx;
		.li{
			width: 100%;
			background: #fff;
			margin-bottom: 30rpx;
			.li_1{
				width: 100%;
				box-shadow: 0px 0px 14px 0px rgba(211, 213, 220, 0.4);
				border-radius: 24px;
				position: relative;
				padding: 33rpx 27rpx;
				background: #fff;
				z-index: 10;
				.li_1_1{
					font-size: 38rpx;
					color: #313233;
					margin-bottom: 50rpx;
				}
				.li_1_2{
					font-size: 38rpx;
					color: #313233;
					display: flex;
					align-items: center;
					margin-bottom: 50rpx;
					.li_1_2_1{
						width: 200rpx;
					}
				}
				.li_1_3{
					font-size: 38rpx;
					color: #313233;
					display: flex;
					align-items: center;
					.li_1_2_1{
						width: 200rpx;
					}
				}
				
			}
			.li_2{
				box-shadow: 0px 0px 14px 0px rgba(211, 213, 220, 0.4);
				border-radius: 16px;
				width: 90%;
				margin-left: 5%;
				position: relative;
				padding: 21rpx 24rpx;
				align-items: center;
				display: flex;
				top: -10rpx;
				image{
					width: 52rpx;
					height: 52rpx;
					margin-right: 20rpx;
				}
				.dizhi{
					font-size: 26rpx;
					color: #5C5F66;
				}
			}
		}
		
	}
	.title{
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
		background: #fff;
		margin-top: var(--status-bar-height);
	}
	
</style>
